<template>
	<div class="goods_list table-theme">
		<head-title title="商品--我的平台商品"></head-title>
		<el-card>
			<div class="goods-top-menu">
				<div class="goods-menu-left">
					<div class="client-view">
						<el-select v-model="status" placeholder="上下架" @change="selectType">
							<el-option label="上架" value="1"></el-option>
							<el-option label="下架" value="2"></el-option>
						</el-select>
					</div>
				</div>

				<div class="goods-menu-right">
					<refresh-button @refresh="refreshPage"></refresh-button>
					<search-view :option="selectList" @value="goSearch" @clear="refreshPage"></search-view>
				</div>
			</div>
			<p style="text-align: right;line-height: 30px;">总商品数：{{ total }}</p>
			<el-table :data="goodsList">

				<el-table-column label="序号" align="center" prop="goods_id"></el-table-column>
				<el-table-column label="型号" align="center" prop="goods_sn"></el-table-column>
				<el-table-column label="名称" align="center" prop="goods_name"></el-table-column>
				<el-table-column label="空间" align="center" prop="space_name"></el-table-column>
				<el-table-column label="风格" align="center" prop="style_name"></el-table-column>
				<el-table-column label="品类" align="center" prop="class_name"></el-table-column>
				<el-table-column label="零售价" align="center" prop="retail_price"></el-table-column>
				<el-table-column label="主图" align="center" width="80">
					<template slot-scope="scope">
						<ImgPopover :src="scope.row.image_middle"></ImgPopover>
					</template>
				</el-table-column>
				<el-table-column label="上下架" align="center">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.status" :active-value="1" :inactive-value="2" @change="upDown($event, scope.row.store_platform_id)"></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="排序" align="center" prop="" width="100">
					<template slot-scope="scope">
						<el-input v-model="scope.row.sort" placeholder="" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
						 @keyup.enter.native="postSort(scope.row.sort, scope.row.store_platform_id)" @blur="postSort(scope.row.sort, scope.row.store_platform_id)"></el-input>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" width="220">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" @click="goodsDetails(scope.row.goods_id)">详情</el-button>
						<el-button type="danger" size="mini" @click="delGoods(scope.row.store_platform_id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pages">
				<el-pagination background layout="prev, pager, next, jumper" :total="total" @current-change="init" :current-page="page"></el-pagination>
			</div>
		</el-card>

	</div>
</template>

<script>
	import ImgPopover from '@/components/ImgPopover';
	export default {
		components: {
			ImgPopover
		},
		name: 'goods_list',
		data() {
			return {
				selectContent: '', // 分类搜索平输入框的值
				selectText: '', // 搜索框提示
				classSelect: '1', // 分类搜索
				goodsList: [], // 商品列表
				total: 0,
				status: '1', // 上下架
				page: 0,
				multipleSelection: [],
				selectList: [{
					value: 0,
					label: '商品编号'
				}],
			};
		},

		methods: {
			// 初始化列表
			init(e) {
				this.page = e;
				let data = {
					page: e - 1 ? e - 1 : 0,
					limit: 10,
					status: this.status,
					store_id: localStorage.getItem('store_id'),
				};

				if (this.classSelect == 0) {
					data.goods_sn = this.selectContent;
				}

				this.$http(this.$ApiList.PlatformGoodsLists, data).then(res => {
					this.goodsList = res.datas.list
					this.total = res.datas.count;
				});
			},

			goSearch(classSelect, selectContent) {
				this.classSelect = classSelect;
				this.selectContent = selectContent;
				this.init();
			},
			selectType() {
				this.init();
			},
			// 上下架
			upDown(e, id) {
				let data = {
					store_id: localStorage.getItem('store_id'),
					store_platform_id: id,
					status: e
				};
				this.$http(this.$ApiList.OutGoods, data).then(res => {
					this.$layer.msg(res.datas);
					this.init(this.page);
				});
			},
			refreshPage() {
				this.status = '1';
				this.page = 1;
				this.selectContent = '';
				this.classSelect = 0;
				this.init();
			},
			delGoods(store_platform_id) {
				this.$confirm('确定删除吗?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						let data = {
							store_platform_id: store_platform_id,
							store_id: localStorage.getItem('store_id')
						};
						this.$http(this.$ApiList.BDelGoods, data).then(res => {
							this.$layer.msg('删除成功');
						});
						this.page = 1;
						this.init();
					})
					.catch(() => {});
			},
			// 商品详情
			goodsDetails(goodsId) {
				this.$router.push({
					path: '/goods_details',
					query: {
						type: 1,
						id: goodsId
					}
				});
			},
			postSort(sort, store_platform_id) {
				if (sort < 0 || sort === "") {
					this.$layer.msg('请输入正确的排序');
					return
				}
				let data = {
					store_platform_id: store_platform_id,
					sort: sort,
					store_id: localStorage.getItem('store_id')
				}

				this.$http(this.$ApiList.PlatformUp, data).then(res => {});
			},
		},
		created() {
			this.init();
		}
	};
</script>
<style lang="scss">
	.goods_list {
		.goods-top-menu {
			display: flex;
		}

		.refresh-btn {
			margin-left: 10px;
		}

		.goods-menu-left {
			flex: 1;
			display: flex;
		}

		.goods-menu-right {
			flex: 2;
			display: flex;
			flex-direction: row-reverse;
		}

		.btn-group {
			display: flex;
			margin-top: 10px;
		}

		.btn-group .btn-item {
			margin-right: 10px;
		}

		.client-view {
			margin-right: 10px;
			width: 120px;
		}

		.goods-top-menu .input-with-select .el-input-group__prepend {
			width: 110px;
			background-color: #fff;
		}

		.goods-top-menu .input-with-select .el-input__inner:nth-child(2) {
			width: 150px;
			padding-right: 15px;
		}

		.user-info .el-avatar {
			display: block;
			margin: 0 auto;
		}

		.info-exhibition {
			margin-top: 20px;
		}

		.info-exhibition p {
			text-align: center;
			line-height: 30px;
		}
	}
</style>
